<template>
    <div>
        <div class="TopicView">
            <div class="itembox">
                <div class="abovebox">
                    一天一句读书笔记
                </div>

                <div class="middlebox">
                    每天记录一条读到的笔记，记录读书的日子
                </div>


                <div class="underbox">
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                </div>
            </div>
            <div class="itembox">
                <div class="abovebox">
                    一天一句读书笔记
                </div>

                <div class="middlebox">
                    每天记录一条读到的笔记，记录读书的日子
                </div>


                <div class="underbox">
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                </div>
            </div>
            <div class="itembox">
                <div class="abovebox">
                    一天一句读书笔记
                </div>

                <div class="middlebox">
                    每天记录一条读到的笔记，记录读书的日子
                </div>


                <div class="underbox">
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                    <span>
                        <img src="../assets/img/此岸彼岸.png" alt="">
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.TopicView{
    margin-top:130px ;
    padding:0px 10px;
    .itembox{
        width: 355px;
        background:url(../assets/ic_medal_bg.webp) no-repeat;
        background-size: 355px 167px;
        border-radius: 4px;
        padding-left: 10px;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-bottom: 15px;
        .abovebox{
            color: #fefefe;
            font-size: 14px;
            margin-bottom: 38px;
        }

        .middlebox{
            color: #f8f7f6;
            font-size: 12px;
            margin-bottom: 38px;
        }

        .underbox{
            span{
                
                img{
                    width: 20px;
                    height: 20px;
                    border-radius: 50px;
                    margin-right: 4px;
                }
            }
        }



    }
}
</style>